import React, { PureComponent, Fragment } from "react";
import { Button, Words, Image, Arwes, Link } from "arwes";
import { Howl } from 'howler';
export default class index extends PureComponent {
  constructor(props) {
    super(props);
    this.sounds = {
      click: new Howl({
        src: ['./sound/click.mp3']
      }),
      typing: new Howl({
        src: ['./sound/typing.mp3']
      }),
      deploy: new Howl({
        src: ['./sound/deploy.mp3']
      }),
    }
    this.state = {
      show: false
    };
  }

  componentDidMount() {
    this.setState({
      show: true
    })
  }
  gourl = (url) => {
    this.sounds.click.play()
    if (this.props.location.pathname == url) {
      return
    }
    this.sounds.deploy.play()
    this.setState({
      show: !this.state.show
    });
    setTimeout(() => {
      this.props.history.push(url);
    }, 500);
  }
  render() {
    return (
      <Arwes
        timeout={1500}
        show={this.state.show}
        animate
        background="./img/background-large.jpg"
        pattern="./img/glow.png"
      >
        <div
          style={{
            margin: "auto",
            textAlign: "center",
            marginTop: "15%",
            maxWidth: 430
          }}
        >
          <div style={{ width: '100%', height: '150', marginBottom: 5 }}>
            <Image show={this.state.show} layer={"header"} animate resources='./img/mine.jpeg' style={{ width: 148, height: 148, display: 'inline-block' }}></Image>
          </div>
          <Words
            layer={"control"}
            animate
            show={this.state.show}
            style={{
              fontSize: 32,
              color: '#a1ecfb',
              lineHeight: 0.5,
              fontFamily: 'Electrolize", "sans-serif',
              textShadow: '0 0 4px rgba(161,236,251,0.65)',
              fontWeight: 'bold',
              textTransform: 'uppercase',
            }}>
            GUO WÉNJUN
          </Words>
          <p>
            <Words
              show={this.state.show}
              layer={"control"}
              animate
              style={{
                fontFamily: "Electrolize,站酷文艺体,sans-serif",
                color: '#30fffe',
                fontSize: 21,
                lineHeight: 1.5,
              }}
            >Web前端工程师.JavaScript.铲屎官.嵌影纸雕.加油你是最胖的.</Words>
          </p>
          <Link show={this.state.show} href='https://gitee.com/mimidegongkai' target="_blank" style={{ fontFamily: "Electrolize,站酷文艺体,sans-serif", fontSize: 18 }}><i className="mdi mdi-code-brackets" /> Code</Link>
          <Link show={this.state.show} href='https://qm.qq.com/cgi-bin/qm/qr?k=BAW8distGrNRQIdjmU5AB4QhNuSqUTwo&authKey=XNoIIKEujX1cssixuOJfE7pEU8uyWj%2BMhr%2FiL5FmOx7wXw%2B4Y25z%2FBfHndxwvHws&noverify=0&group_code=660423128' target="_blank" style={{ marginLeft: 20, fontFamily: "Electrolize,站酷文艺体,sans-serif", fontSize: 18 }}><i className="mdi mdi-group" /> Group</Link>
          <Link show={this.state.show} href='https://map.baidu.com/search/%E5%8C%97%E4%BA%AC%E5%B8%82/@12959220,4825334.5,12z?querytype=s&wd=%E5%8C%97%E4%BA%AC&c=131&pn=0&device_ratio=2&da_src=shareurl' target="_blank" style={{ marginLeft: 20, fontFamily: "Electrolize,站酷文艺体,sans-serif", fontSize: 18 }}><i className="mdi mdi-map-marker-outline" /> BeiJin</Link>
          <div style={{ lineHeight: 3 }}>
            <Button
              animate
              show={this.state.show}
              layer={"control"}
              style={{ marginTop: 0 }}
              onClick={() => this.gourl('blog')}
            >网络日志
            </Button>
            <Button
              show={this.state.show}
              layer={"control"}
              style={{ marginLeft: 10, marginTop: 0 }}
              animate
              onClick={() => this.gourl('paper')}
            >纸雕
            </Button>
            <Button
              show={this.state.show}
              layer={"control"}
              style={{ marginLeft: 10, marginTop: 0 }}
              animate
              onClick={() => this.gourl('tools')}
            >开发工具
            </Button>
          </div>
        </div>
        <div style={{ textAlign: 'center',width:'100%', bottom: 0, fontSize: 15, position: 'absolute' }}>
          <Link style={{ color: '#FFF' }} href="http://beian.miit.gov.cn/" target="_blank">京ICP备2021006930号</Link>
        </div>
      </Arwes >
    );
  }
}
